<template>
  <div ref="root" class="action-size">
    <a-tooltip title="密度">
      <a-dropdown placement="bottomCenter" :trigger="['click']" :get-popup-container="() => $refs.root">
        <a-icon class="action" type="column-height" />
        <a-menu slot="overlay" :selected-keys="[value]" @click="onClick">
          <a-menu-item key="default">
            默认
          </a-menu-item>
          <a-menu-item key="middle">
            中等
          </a-menu-item>
          <a-menu-item key="small">
            紧密
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </a-tooltip>
  </div>
</template>

<script>
export default {
  name: 'ActionSize',
  props: {
    value: {
      type: String,
      default: 'default'
    }
  },
  inject: ['table'],
  data() {
    return {
      selectedKeys: ['middle']
    }
  },
  methods: {
    onClick({ key }) {
      this.$emit('input', key)
    }
  }
}
</script>

<style scoped lang="less">
.action-size{
  display: inline-block;
}
</style>
